<template>
  <base-paenl>
    <div slot="header" class="area-select">
      <span>楼盘基本信息</span>
      <el-select
        size="mini"
        v-model="value"
        filterable
        remote
        reserve-keyword
        placeholder="输入坐落关键字搜索房屋"
        :remote-method="remoteMethod"
        :loading="loading"
        class="area-type"
        popper-class="area-popper"
        @change="selectLd"
      >
        <el-option
          v-for="item in options"
          :key="item.lzId"
          :label="item.zzl"
          :value="item.lzId"
        >
        </el-option>
      </el-select>
    </div>
    <div slot="main" class="slot-main">
      <div v-if="sjyMessage != ''" class="panel-message">
        {{ sjyMessage }}
      </div>
      <div v-else v-for="(item, index) of dataList" :key="index">
        <div
          class="panel-second-row5"
          :class="item.name == '所属网格' ? 'panel-item-click' : ''"
          @click="goToGrid()"
        >
          <div class="panel-row-title">
            {{ item.name }}
          </div>
          <!-- <div v-if="bxtMessage != '' && item.name != '楼幢坐落'" class="panel-message">
            {{ bxtMessage }}
          </div> -->
          <!-- 有数据就显示数据 -->
          <div class="panel-row-main">
            <div
              v-if="
                ![
                  '所属项目',
                  '所属网格',
                  '项目产权单位',
                  '项目运营单位'
                ].includes(item.name)
              "
              class="panel-row-content"
            >
              {{ item.value || bxtMessage }}
            </div>
            <div
              v-if="item.name == '所属项目'"
              class="panel-row-content panel-row-content2"
            >
              <div class="panel-row-content-value" style="align-items: baseline;">
                {{ item.value || bxtMessage }}
              </div>
              <div v-if="item.rsFlag" class="panel-row-content-flag">
                已入市
              </div>
            </div>
            <div
              v-if="item.name == '项目产权单位'"
              class="panel-row-content panel-row-content2"
            >
              <div class="panel-row-content-value"  style="align-items: baseline;">
                {{ item.value || "未收录产权信息" }}
              </div>
            </div>
            <div
              v-if="item.name == '项目运营单位'"
              class="panel-row-content panel-row-content2"
            >
              <div class="panel-row-content-value"  style="align-items: baseline;">
                {{ item.value || "无" }}
              </div>
            </div>
            <div
              v-if="item.name == '所属网格'"
              class="panel-row-content panel-row-content3 panel-item-click"
              @click="goToGrid()"
            >
              {{ item.value || "该房屋无社区信息" }}
              <div
                class="panel-row-gridman-content panel-item-click"
                v-for="(subitem, subindex) of item.gridman"
                :key="subindex"
                @click.stop="goToGridman(subitem)"
              >
                <div>{{ subitem.zw }}</div>
                <div>{{ subitem.name }}</div>
                <div>{{ subitem.sjh }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import { getFloorId, getFloorInfo } from "@/assets/modules/service";
import exportVue from "@/assets/modules/exportVue";
import store from "@/assets/modules/store";
import { searchFeatures } from "@/assets/modules/areaUtils";
@Component({
  name: "CFloorInformation",
  components: { BasePaenl }
})
export default class extends Vue {
  stopRequest: boolean = false; // 只请求一次数据
  dataList: any = [];
  options: any[] = [];
  value = "";
  list: any[] = [];
  loading = false;
  sjyMessage = "";
  bxtMessage = "";
  floorObject: any = null;
  gridId = "";
  get view() {
    return store.mapView;
  }
  mounted() {
    const win: any = window;
    this.dataList = JSON.parse(JSON.stringify(win.dataConfig.floorInformation));
    this.list = win.dataConfig.floorList;
    this.getFloor();
    const floorData: any = {
      lzId: "",
      ldzl: "",
      sjytssx: "",
      bxttssx: ""
    };
    this.$store.commit("panelData/setFloorData", floorData);
  }
  remoteMethod(query: any) {
    if (query !== "") {
      this.loading = true;
      // setTimeout(() => {
      //   this.loading = false;
      //   this.options = this.list.filter(item => {
      //     return item.zzl.toLowerCase().indexOf(query.toLowerCase()) > -1;
      //   });
      // }, 200);
      const param: any = {
        zzl: query,
        current: 1,
        size: 10
      };
      getFloorId(param).then((res: any) => {
        this.loading = false;
        if (res?.data) {
          this.options = res.data;
        } else {
          this.options = [];
        }
      });
    } else {
      this.options = [];
    }
  }
  selectLd() {
    exportVue.$emit("floor-select", this.value);
  }
  getFloor() {
    exportVue.$on("get-floor", (item: any) => {
      this.floorObject = item;
      if (item) {
        this.getGridId();
      } else {
      }
    });
    exportVue.$on("get-floor-click", (item: any) => {
      this.floorObject = item;
      this.value = "";
      if (item) {
        this.getGridId();
      }
    });
  }
  getGridId() {
    const geometry = this.floorObject.geometry;
    if (!this.view) {
      return;
    }

    const query = store.wgfwLastLayer.createQuery();
    query.returnGeometry = true;
    query.outFields = ["*"];
    query.where = "1=1";
    query.geometry = geometry;
    query.outSpatialReference = store.spatialReference;
    store.wgfwLastLayer.queryFeatures(query).then((results: any) => {
      if (results && results.features) {
        if (results.features.length > 0) {
          this.gridId = results.features[0].attributes.wgid;
          this.getFloorInfo(this.floorObject.attributes.LPBDZBH, this.gridId);
        } else {
          this.gridId = "";
          this.getFloorInfo(this.floorObject.attributes.LPBDZBH);
        }
      } else {
        this.gridId = "";
        this.getFloorInfo(this.floorObject.attributes.LPBDZBH);
      }
    });
  }
  getFloorInfo(lzId: any, gridId?: any) {
    this.$store.commit("panel/setRightPanelShow", false);
    const data = {
      lzId: lzId,
      gridId: gridId
    };
    getFloorInfo(data).then((res: any) => {
      if (res?.data) {
        res.data?.lpjbxxWgys?.forEach((item: any, index: any) => {
          if (item.zw == "网格长") {
            res.data?.lpjbxxWgys.unshift(
              res.data?.lpjbxxWgys.splice(index, 1)[0]
            );
          }
        });
        if (res.data.sjytssx && res.data.sjytssx != "") {
          this.sjyMessage = res.data.sjytssx;
        } else if (
          res.data.bxttssx &&
          res.data.bxttssx != "" &&
          res.data.bxttssx != "" &&
          res.data.bxttssx != "本系统未收录该楼幢租赁信息"
        ) {
          this.sjyMessage = "";
          this.bxtMessage = res.data.bxttssx;
        } else {
          this.sjyMessage = "";
          this.bxtMessage = res.data.bxttssx;
          this.dataList.ldzl.value = res.data.ldzl;
          this.dataList.sswg.value = res.data.sswg;
          this.dataList.sswg.gridman = res.data.lpjbxxWgys;
          this.dataList.ssxm.value = res.data.ssxm
            ? res.data.ssxm.join(',')
            : "无";
          this.dataList.ssxm.rsFlag = res.data.yydwlx ? 1 : 0;
          const cqdwList = res.data.lpxxProjectCqdw?.map((item:any)=>{
            return item.cqdw
          }).filter((item:any)=>{
            return item != null
          })
          this.dataList.cqdw.value = cqdwList ? cqdwList.join(',') : '';
          const yydwList = res.data.lpxxProjectYydw?.map((item:any)=>{
            return item.yydw
          }).filter((item:any)=>{
            return item != null
          })
          this.dataList.xmyydw.value = yydwList ? yydwList.join(',') : '';
        }
        const floorData = {
          lzId: lzId,
          ldzl: res.data.ldzl,
          sjytssx: res.data.sjytssx,
          bxttssx: res.data.bxttssx
        };
        this.$store.commit("panelData/setFloorData", floorData);
      } else {
        this.sjyMessage = "数据源未收录楼幢信息";
        const floorData = {
          lzId: lzId,
          ldzl: "",
          sjytssx: "数据源未收录楼幢信息",
          bxttssx: ""
        };
        this.$store.commit("panelData/setFloorData", floorData);
      }      
    });
  }
  goToGrid() {
    this.$store.commit("panelData/setFloorGridId", this.gridId);
    exportVue.$emit("floor-go-grid");
  }
  goToGridman(item: any) {
    this.$store.commit("panelData/setFloorGridmanSfid", item.sfid ?? "1");
    const target = "gridman";
    this.$store.commit("panel/setRightPanelShow", false);
    this.$store.commit("panel/setDialogShow", false);
    this.$store.commit("panel/setLeftPanel", target);
    this.$store.commit("panel/setRightPanel", target);
    this.$store.commit("panel/setBottomPanel", target);
    this.$store.commit("handler/setTarget", target + "-handler");
    this.$store.commit("view/setRestoration", true);
    this.$store.commit("panel/setDialogShow", false);
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 411px;
  .panel-second-row5 {
    .panel-row-title {
      width: 388px;
      height: 17px;
      margin-bottom: 10px;
    }
    .panel-row-main {
      margin-bottom: 10px;
    }
    .panel-row-content {
      width: 395px;
      height: 37px;
      background-image: url(../../assets/images/panels/biaogekuang.png);
      background-size: 100% 100%;
      padding: 10px 15px;
      overflow: hidden;
      overflow: scroll;
    }
    .panel-row-content-flag {
      width: 52px;
      height: 20px;
      background-image: url(../../assets/images/panels/yirushibeijingkuang.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 12px;
      line-height: 17px;
      color: #38db94;
      margin-left: 10px;
    }
    .panel-row-content2 {
      display: flex;
    }
    .panel-row-content3 {
      width: 394px;
      height: 102px;
      background-image: url(../../assets/images/panels/biaogekuang-da.png);
      background-size: 100% 100%;
      overflow: hidden;
      overflow: scroll;
      .panel-row-gridman-content {
        width: 362px;
        height: 26px;
        background-image: url(../../assets/images/panels/wanggechangbeijingqian.png);
        background-size: 100% 100%;
        margin: 5px 0;
        font-family: AlibabaPuHuiTi_2_55_Regular;
        font-size: 12px;
        color: #ffffff;
        display: flex;
        align-items: center;
        padding: 0 10px;
        justify-content: space-between;
      }
    }
    .panel-row-content3::-webkit-scrollbar,
    .panel-row-content::-webkit-scrollbar {
      display: none;
    }
  }
}
.area-type {
  width: 202px;
  margin-left: 70px;
}
</style>
<style lang="scss"></style>
